@using ERP.Team.ProductionSystem
@model TeamSet
@{
    Layout = null;
    var teamTypes = new[] { "注塑", "机加工", "组装", "仓库" };
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改班组</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <style>
        .layui-form {
            padding: 20px;
            margin-right: 30px;
        }
        .layui-form-item {
            margin-bottom: 20px;
        }
        .form-buttons {
            text-align: center;
            margin-top: 30px;
        }
        .team-members { 
            margin-top: 30px; 
        }
        .member-table-container {
            margin-top: 20px;
            padding: 15px;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            border-radius: 2px;
        }
        .member-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .member-title {
            font-size: 16px;
            font-weight: 500;
        }
        /* 用户选择弹窗样式 */
        .user-select-dialog {
            padding: 15px;
        }
        .user-select-search {
            margin-bottom: 15px;
            padding: 15px;
            background: #f8f8f8;
            border-radius: 4px;
        }
        .search-form {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .search-input {
            flex: 1;
        }
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        .department-list {
            padding: 10px 0;
        }
        .department-list label {
            display: block;
            padding: 5px 15px;
            cursor: pointer;
        }
        .department-list label:hover {
            background: #f2f2f2;
        }
    </style>
</head>
<body>
    <form class="layui-form" lay-filter="teamForm">
        @Html.AntiForgeryToken()
        <input type="hidden" name="id" value="@Model.Id" />
        
        <div class="layui-form-item">
            <label class="layui-form-label">班组编号</label>
            <div class="layui-input-block">
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="teamNumber" value="@Model.TeamNumber" lay-verify="required" placeholder="请输入班组编号" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-normal" onclick="generateTeamNumber()">
                        <i class="layui-icon">&#xe621;</i> 自动生成
                    </button>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">班组名称</label>
            <div class="layui-input-block">
                <input type="text" name="teamName" value="@Model.TeamName" lay-verify="required" placeholder="请输入班组名称" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">班组类型</label>
            <div class="layui-input-block">
                <select name="teamType" lay-verify="required">
                    <option value="">请选择班组类型</option>
                    @foreach (var type in teamTypes)
                    {
                        if (type == Model.TeamType)
                        {
                            <option value="@type" selected>@type</option>
                        }
                        else
                        {
                            <option value="@type">@type</option>
                        }
                    }
                </select>
            </div>
        </div>

        <!-- 项目组成员部分 -->
        <div class="team-members">
            <div class="member-table-container">
                <div class="member-header">
                    <div class="member-title">项目组成员</div>
                    <button type="button" class="layui-btn layui-btn-sm" onclick="openUserSelect()">
                        <i class="layui-icon">&#xe654;</i> 添加成员
                    </button>
                </div>
                <table id="memberTable" lay-filter="memberTable"></table>
                <div id="memberPagination"></div>
            </div>
        </div>

        <div class="form-buttons">
            <button type="submit" class="layui-btn" lay-submit lay-filter="saveTeam">保存</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="closeDialog()">取消</button>
        </div>
    </form>

    <!-- 选择用户弹窗 -->
    <div id="userSelectDialog" style="display: none;">
        <div class="user-select-dialog">
            <div class="user-select-search">
                <div class="search-form">
                    <div class="layui-input-inline search-input">
                        <input type="text" id="searchUserName" placeholder="用户名称" class="layui-input">
                    </div>
                    <div class="layui-input-inline search-input">
                        <input type="text" id="searchUserPhone" placeholder="手机号码" class="layui-input">
                    </div>
                    <button type="button" class="layui-btn" onclick="searchUsers()">
                        <i class="layui-icon">&#xe615;</i> 搜索
                    </button>
                    <button type="button" class="layui-btn layui-btn-primary" onclick="resetSearch()">
                        <i class="layui-icon">&#xe669;</i> 重置
                    </button>
                </div>
            </div>
            <table id="userSelectTable" lay-filter="userSelectTable"></table>
            <div id="userSelectPagination"></div>
            <div style="text-align: center; padding-top: 15px;">
                <button type="button" class="layui-btn" onclick="confirmUserSelection()">确定</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
            </div>
        </div>
    </div>

    <script type="text/html" id="memberOperations">
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
        var selectedUsers = []; // 存储选中的用户
        
        layui.use(['form', 'layer', 'table', 'laypage'], function(){
            var form = layui.form;
            var layer = layui.layer;
            var table = layui.table;
            var laypage = layui.laypage;
            
            // 初始化成员表格
            table.render({
                elem: '#memberTable',
                data: [],
                cols: [[
                    {field: 'userName', title: '用户名', width: 120},
                    {field: 'userNickName', title: '用户昵称', width: 120},
                    {field: 'userPhone', title: '电话', width: 120},
                    {field: 'departmentName', title: '部门', width: 150},
                    {title: '操作', toolbar: '#memberOperations', width: 100, fixed: 'right'}
                ]],
                page: false,
                limit: 10
            });
            
            // 监听成员表格工具条
            table.on('tool(memberTable)', function(obj){
                if(obj.event === 'del'){
                    layer.confirm('确定删除该成员吗？', function(index){
                        obj.del();
                        selectedUsers = selectedUsers.filter(user => user.userName !== obj.data.userName);
                        layer.close(index);
                    });
                }
            });
            
            // 监听表单提交
            form.on('submit(saveTeam)', function(data){
                var formData = data.field;
                formData.teamMembers = selectedUsers;
                
                $.ajax({
                    url: '/TeamSet/UpdateTeam',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    headers: {
                        'RequestVerificationToken': $('input[name="__RequestVerificationToken"]').val()
                    },
                    success: function(res) {
                        if (res.success) {
                            layer.msg('保存成功', {icon: 1}, function(){
                                if (parent.refreshTeamSetData) {
                                    parent.refreshTeamSetData();
                                }
                                closeDialog();
                            });
                        } else {
                            layer.msg(res.message || '保存失败', {icon: 2});
                        }
                    },
                    error: function(xhr) {
                        layer.msg('保存失败：' + xhr.responseText, {icon: 2});
                    }
                });
                return false;
            });
        });

        // 打开用户选择弹窗
        function openUserSelect() {
            layui.use(['table', 'laypage'], function(){
                var table = layui.table;
                
                // 渲染用户选择表格
                table.render({
                    elem: '#userSelectTable',
                    url: '/TeamSet/GetUserList',
                    cols: [[
                        {type: 'checkbox', fixed: 'left'},
                        {field: 'userName', title: '用户名', width: 120},
                        {field: 'userNickName', title: '用户昵称', width: 120},
                        {field: 'userPhone', title: '手机号码', width: 120},
                        {field: 'departmentName', title: '部门', width: 150}
                    ]],
                    page: true,
                    limit: 10,
                    limits: [10],
                    done: function(){
                        // 回显已选用户
                        selectedUsers.forEach(function(user){
                            var index = layui.$(`.layui-table-body tr[data-index]`).filter(function(){
                                return layui.$(this).find(`td[data-field="userName"] div`).text() === user.userName;
                            }).attr('data-index');
                            if(index !== undefined){
                                table.setChecked('userSelectTable', index);
                            }
                        });
                    }
                });
            });

            layer.open({
                type: 1,
                title: '选择用户',
                area: ['800px', '600px'],
                content: $('#userSelectDialog'),
                success: function(layero){
                    layero.find('.layui-layer-content').css('overflow', 'visible');
                }
            });
        }

        // 确认用户选择
        function confirmUserSelection() {
            layui.use('table', function(){
                var table = layui.table;
                var checkStatus = table.checkStatus('userSelectTable');
                var checkedData = checkStatus.data;
                
                if(checkedData.length === 0) {
                    layer.msg('请选择用户', {icon: 2});
                    return;
                }
                
                // 更新选中的用户列表
                selectedUsers = checkedData;
                
                // 更新成员表格
                table.reload('memberTable', {
                    data: selectedUsers
                });
                
                layer.closeAll();
                layer.msg('已添加' + checkedData.length + '名成员', {icon: 1});
            });
        }

        // 搜索用户
        function searchUsers() {
            var userName = $('#searchUserName').val();
            var userPhone = $('#searchUserPhone').val();
            
            layui.table.reload('userSelectTable', {
                where: {
                    userName: userName,
                    userPhone: userPhone
                },
                page: {
                    curr: 1
                }
            });
        }

        // 重置搜索
        function resetSearch() {
            $('#searchUserName').val('');
            $('#searchUserPhone').val('');
            searchUsers();
        }

        // 关闭弹窗
        function closeDialog() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }

        // 自动生成班组编号
        function generateTeamNumber() {
            $.get('/TeamSet/GenerateTeamNumber', function(res) {
                if (res.success) {
                    $('input[name="teamNumber"]').val(res.data);
                } else {
                    layer.msg(res.message || '生成编号失败', {icon: 2});
                }
            });
        }

        // 页面加载完成后加载当前班组成员
        $(document).ready(function() {
            var teamId = $('input[name="id"]').val();
            if (teamId) {
                $.ajax({
                    url: '/TeamSet/GetTeamMembers',
                    type: 'GET',
                    data: { teamId: teamId },
                    success: function(res) {
                        if (res.success && res.data) {
                            selectedUsers = res.data;
                            layui.table.reload('memberTable', {
                                data: selectedUsers
                            });
                        }
                    }
                });
            }
        });
    </script>
</body>
</html> 